<template>

    <div>
        <h2>批改页面</h2>
    </div>

    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="100" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="学号" prop="identityId" />
        <el-table-column label="分数" prop="score" />
        <el-table-column align="right">
            <template #default="scope">
                <el-button size="small" style="background:white;color:black" @click="check(scope.row)">查看
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible" title="批改作业">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" readonly autocomplete="off" type="textarea"
                    :autosize="{ minRows: 10, maxRows: 15 }" />
            </el-form-item>
            <el-form-item label="分数" prop="score" :label-width="formLabelWidth">
                <!-- v-model -->
                <el-input v-model.number="form.score" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit('form')">提交</el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script>
import { useRoute } from "vue-router";
import { queryByTaskId, mark } from "../../api/work.js";

export default {
    // 数据源
    data() {
        var checkScore = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('成绩不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value < 0 || value > 100) {
                        callback(new Error('请输入0到100的整数'));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        return {
            rules: {
                score: [
                    { validator: checkScore, trigger: 'blur' }
                ]
            },
            formLabelWidth: '50px',
            form: {
                content: '',
                score: '',
                workId: ''
            },
            dialogFormVisible: false,
            taskId: '',
            tableData: []
        };
    },
    //生命周期函数---
    mounted() {
        this.taskId = this.getParams()
        this.getData()
    },
    //基本方法
    methods: {
        submit(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    mark(this.form.workId, this.form.score).then((res) => {
                        if (res.code == 200) {
                            this.getData()
                            this.dialogFormVisible = false
                            alert('批改成功');
                        } else {
                            console.log("编辑失败")
                        }
                    })
                } else {
                    alert('请输入0到100的整数');
                }
            });
        },
        check(row) {
            this.dialogFormVisible = true
            this.form.content = row.content
            this.form.score = row.score
            this.form.workId = row.workId
            console.log(row)
        },
        getParams() {
            return useRoute().query.taskId
        },
        getData() {
            this.tableData = []
            queryByTaskId(this.taskId).then((res) => {
                if (res.code == 200) {
                    console.log(res.data)
                    for (var i = 0; i < res.data.length; i++) {
                        this.tableData.push({ score: res.data[i].score, content: res.data[i].content, workId: res.data[i].workId, identityId: res.data[i].identityId, name: res.data[i].name })
                    }
                    console.log(this.tableData)
                } else {
                    console.log("queryByTaskId查询失败")
                }
            })
        },
    },
    //计算类型方法和其他方法的区别：有缓存。以内存换时间，适用于频繁使用的计算
    computed() {

    },
};
</script>

<style  lang="scss" scoped>
</style>